<!--
 * @Description:银行卡列表
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-31 9:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:01
-->
<template>
	<view class="bank-card-list-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="currentType === '0'?'银行卡':'Usdt'" >
				<u-button class="slot-btn" slot="icon" @click="addBankCard">
					<u-icon name="plus-circle-fill"></u-icon>
					新增
				</u-button>
			</c-navigation-bar>
			<view class="content-box">
				<!-- 银行卡轮播 -->
				<view class="bank-box" v-show="currentType === '0'">
					<swiper class="card-banner" :indicator-dots="true" previous-margin="80rpx" next-margin="80rpx"
						:interval="3000" indicator-active-color="#453BD6" :current="current"
						@change="(data)=>{current = data.target.current}" indicator-color="#fff" :duration="1000">
						<swiper-item v-for="(item,id) in list.bank||[]" :key="id">
							<view :class="`swiper-item ${current === id ? 'is-current':''}`">
								<bank-card :data="item"></bank-card>
							</view>
						</swiper-item>
					</swiper>
					<view class="check-currency">
						<view @click="openPopupShow">
							<text>{{$t('recharge.chooseTheCurrency')}}</text>
							<view>
								{{exchangeRateValue}}
								<image style="width: 20rpx;height: 20rpx;" src="@/static/svg/right-arrows.svg" />
							</view>
						</view>
					</view>
					<view class="balance">
						<h2>余额</h2>
						<u-input placeholder=""></u-input>
					</view>
					<view class="btn-box">
						<u-button plain style="border: 2rpx solid #2934D0;color: #2934D0;">提现</u-button>
						<u-button style="background-color: #2934D0;color: #fff;">充值</u-button>
					</view>
				</view>
				<!-- usdt -->
				<view class="usdt-box" v-show="currentType === '1'">
					<view class="tabs-box">
						<view class="tabs-group">
							<view class="tabs-btn" @click="usdtTypeChange('ERC-20')"
								:class="`${usdtType==='ERC-20'?'is-active':''}`">
								ERC-20
							</view>
							<view class="tabs-btn" @click="usdtTypeChange('TRC-20')"
								:class="`${usdtType === 'TRC-20'?'is-active':''}`">
								TRC-20
							</view>
						</view>
					</view>
					<titleInput :value="list.usdt[usdtType] ?list.usdt[usdtType].bankNo:''" disabled title="地址信息">
					</titleInput>
				</view>
				<view class="partition-line">
					<view>选择令牌</view>
				</view>
				<view class="icon-box">
					<image src="@/static/images/user/usdt.png" mode="" @click="currentTypeChange('1')"></image>
					<image src="@/static/images/user/bank.png" mode="" @click="currentTypeChange('0')"></image>
				</view>
			</view>
		</c-layout>
		<!-- 选择汇率弹出层 -->
		<u-popup v-model="popupShow" class="exchange-rate-popup" :round="100" mode="bottom">
			<view class="popup-main">
				<p class="title">{{$t('recharge.checkThEexchangeRate')}}</p>
				<u-radio-group iconPlacement="right" v-model="exchangeRateValue" placement="column"
					@change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in exchangeRateList" :key="index"
						:label="item" :name="item.currencyName" @change="exchangeRateChange">
						<view class="radio-item">
							<text class="name">
								{{item.currencyName}}
							</text>
							<text class="symbol">
								({{item.symbol}})
							</text>
							<text class="exchange-rate">
								1:{{item.exchangeRate}}
							</text>
						</view>
					</u-radio>
				</u-radio-group>
				<button class="submit-exchange-rate" @click="popClose"
					type="default">{{$t('recharge.finished')}}</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				currentType: '1', // 当前页面展示的类型
				bankCardData: { // 银行卡信息
					"bankName": "",
					"bankNo": "",
					"bankUserName": "",
					"cardType": "",
					"type": "",
					"usdtType": "",
					"userName": ""
				},
				// 列表
				list: {
					bank: null,
					usdt: {
						'ERC-20': null,
						'TRC-20': null,
					}
				},
				usdtType: 'ERC-20',
				popupShow: false, // 汇率弹窗
				exchangeRateValue: '',
				exchangeRateList: [], // 汇率列表

			};
		},
		onLoad() {
			this.geBankCardInfoAjax()
			this.getexchangeRateAjax()
		},
		methods: {
			addBankCard() {
				uni.navigateTo({
					url: "/pages/bankCard/bankCard"
				})
			},
			// 获取银行卡&比特币信息
			geBankCardInfoAjax() {

				// 当前为usdt有类型时 传递参数
				const url = '/app/user/bank/bank/' + this.currentType +
					`${this.currentType ==='1'? `/${this.usdtType}`:''}`

				this.$u.get(url).then(res => {
					this.currentType === '0' ? (this.list.bank = res.data) : (this.list.usdt[this.usdtType] = res
						.data[0])

				})
			},
			// usdt类型切换
			usdtTypeChange(val) {
				this.usdtType = val
			},
			// 银行卡&usdt切换
			currentTypeChange(val) {
				this.currentType = val
				// if (this.currentType === '0' && this.list.bank) {

				// }
				// if (this.currentType === '1' && this.list.bank) {}
				this.geBankCardInfoAjax()
			},
			// 打开汇率弹出层
			openPopupShow() {
				this.popupShow = true
			},
			// 获取汇率接口
			getexchangeRateAjax() {
				this.$u.post('/app/h2-exchange-rate/listRate').then(res => {
					this.exchangeRateList = res.data
					console.log(this.exchangeRateList, '汇率查询');
				}).catch(err => {
					console.log(err);
					console.log(this.exchangeRateList, '汇率查询');
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.bank-card-list-container {
		height: 100vh;

		/deep/  .switch-svg {
			position: relative;
		}

		.slot-btn {
			position: absolute;
			width: 186rpx;
			height: 80rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			border: 4rpx dashed #D8D8D8;
			padding: 0;
			right: 0rpx;
			color: #B1BAC8;

			.u-icon {
				color: #2D37D1;
				margin-right: 12rpx;
			}
		}

		.content-box {
			padding-top: 20rpx;
			height: 100%;
			display: flex;
			flex-direction: column;

			/deep/  .card-banner {
				overflow: visible;

				.uni-swiper-wrapper {
					overflow: visible;
				}

				.uni-swiper-dot:not(.uni-swiper-dot-active) {
					border: 4rpx solid #868686;
					box-sizing: border-box;
				}

				.uni-swiper-dots {
					transform: translate(-50%, 70rpx) !important;
					z-index: 100;
				}

				uni-swiper-item {
					padding: 0 10rpx;
					box-sizing: border-box;
				}

				.uni-swiper-slides {}

				.swiper-item {
					height: 100%;
					transform: scale(0.9);
					opacity: 0.8;
					transition: .2s;

					.bank-card-container {}

					&.is-current {
						opacity: 1;
						transform: scale(1);

						// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
						.bank-card-container {
							// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
						}
					}
				}
			}

			// 选择汇率
			.check-currency {
				margin-top: 50rpx;
				padding: 0 40rpx;
				>view {
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					border: 0rpx;
					line-height: 100rpx;
					font-size: 32rpx;

					>view {
						display: flex;
						align-items: center;

						image {
							margin-left: 10rpx;
						}
					}
				}
			}

			.balance {
				padding: 0 40rpx;
				padding-top: 20rpx;

				h2 {
					font-size: 34rpx;
					font-weight: normal;
					color: #29304D;
				}

				/deep/  .u-input {
					margin-top: 40rpx;
					width: 670rpx;
					height: 100rpx;
					background: rgba(27, 29, 41, 0.084);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 0.5;
					padding: 0 10rpx !important;

					.u-input__input {
						height: 100%;
					}
				}
			}

			.btn-box {
				display: flex;
				padding: 0 40rpx;
				margin-top: 182rpx;

				>.u-btn {
					margin: 0;
					width: 316rpx;
					height: 120rpx;

					&:last-child {
						margin-left: 36rpx;
					}
				}
			}

			.partition-line {
				margin: 0 56rpx;
				border-bottom: 2rpx solid #E8E6EA;
				margin-top: 80rpx;
				position: relative;

				>view {
					width: 226rpx;
					height: 66rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.icon-box {
				display: flex;
				justify-content: center;
				padding-top: 50rpx;
				padding-bottom: 40rpx;

				>image {
					width: 96rpx;
					height: 96rpx;

					&:last-child {
						margin-left: 40rpx;
					}
				}
			}

			.usdt-box {
				flex: auto;

				.tabs-box {
					display: flex;
					justify-content: center;

					.tabs-group {
						display: flex;
						background-color: #f0f0f1;
						border-radius: 50rpx;
						height: 100rpx;
						margin-bottom: 50rpx;
						justify-content: center;

						>view {
							width: 220rpx;
							color: #fff;
							text-align: center;
							line-height: 100rpx;
							color: black;
							border-radius: 50rpx;
							transition: .2s;

							&.is-active {
								color: #fff;
								// border-radius: 50rpx;
								background-color: #2935d0;
							}
						}
					}
				}

				.title-input {
					margin: 30rpx 20rpx;
				}
			}

		}

		.exchange-rate-popup {

			// border-start-start-radius: 20rpx;
			// border-start-end-radius: 20rpx;
			.u-drawer-content {
				background-color: #1c2f9c;
				border-start-start-radius: 20rpx;
				border-start-end-radius: 20rpx;
			}
		}

		.popup-main {
			background-color: #1c2f9c;
			padding-bottom: 20rpx;
			// border-start-start-radius: 20rpx;
			// border-start-end-radius: 20rpx;

			>.title {
				margin-bottom: 50rpx;
				padding-top: 30rpx;
				color: #fff;
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
			}

			.u-radio-group {
				width: 100%;

				.u-radio {
					width: 100% !important;
					justify-content: space-between;

					/deep/  .u-radio__icon-wrap {
						margin-left: 20rpx;
					}
				}
			}

			.radio-item {
				color: #fff;

				.exchange-rate {
					padding-left: 20rpx;
				}
			}

			>.submit-exchange-rate {
				border-radius: 50rpx;
				height: 80rpx;
				margin: 20rpx 20rpx 0rpx;
				font-weight: 700;
				background-color: #8c88a2;
				color: #fff;
				font-size: 40rpx;
				line-height: 80rpx;
			}
		}

	}
</style>
